import React from 'react'
import OverList from './OverList'
import PageTitle from '../../components/page-title'
import {
    Button,
    Divider,
    Tree
} from 'antd'
import {
    DownOutlined,
    ArrowDownOutlined,
    CloseOutlined
} from '@ant-design/icons';




class OverItem extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isNO: false,
            MyList: [
                { CaseID: 1, state: '结束', results: '成功' },
                { CaseID: 2, state: '结束', results: '成功' },
                { CaseID: 3, state: '结束', results: '失败' },
                { CaseID: 4, state: '结束', results: '成功' },
                { CaseID: 5, state: '执行中', results: '' },
                { CaseID: 6, state: '待执行', results: '' }
            ],
            ListItem: [{step:'',state:'',results:''}],
            ItemItem: [{task:'',state:'',log:''}],
            treeData: []
        }
    }
    display() {
        let ListItem = [
            { step: '1-前置任务', state: '完成', results: '--' },
            { step: '2-故障注入', state: '完成', results: '--' },
            { step: '3-事前验证', state: '完成', results: '失败' },
            { step: '4-后置任务', state: '完成', results: '--' },
            { step: '5-事后验证', state: '完成', results: '成功' },]
        this.setState({
            ListItem
        })
    }
    displayB() {
        let ItemItem = [
            { task: '故障节点进程状态', state: '成功', log: '' },
            { task: '其他节点进程状态', state: '成功', log: '' },
            { task: '订单速率', state: '失败', log: 'expect-300;\nreality-0.' },
            { task: '席位链接数', state: '失败', log: 'expect-5;\nreality-0.' },]
        let treeData = [
            {
                title: '用例ID：5',
                key: '0-0',
                icon: <ArrowDownOutlined />,
                children: [
                    {
                        title: '事前验证',
                        key: '0-0-0',
                        icon: <ArrowDownOutlined />,
                        children: [
                            {
                                title: '故障节点进程状态',
                                key: '0-0-0-0',
                                icon: <ArrowDownOutlined />,
                            },
                            {
                                title: '其他节点进程状态',
                                key: '0-0-0-1',
                                icon: <ArrowDownOutlined />,
                            },
                            {
                                title: '订单速率',
                                key: '0-0-0-2',
                                icon: <CloseOutlined />,
                            },
                            {
                                title: '席位链接数',
                                key: '0-0-0-3',
                                icon: <CloseOutlined />,
                            },
                        ]
                    },
                ],
            },
        ]
        this.setState({
            ItemItem,
            treeData
        })
    }
    render() {
        let mylist = this.state.MyList.map((doem, index) => {
            return (
                <tr key={index}>
                    <td>{doem.CaseID}</td>
                    <td>{doem.state}</td>
                    <td> <Button onClick={() => { this.display() }}>{doem.results}</Button> </td>
                </tr>
            )
        })
        let listitem = this.state.ListItem.map((doem, index) => {
            return (
                <tr key={index}>
                    <td>{doem.step}</td>
                    <td>{doem.state}</td>
                    <td> <Button onClick={() => { this.displayB() }} >{doem.results}</Button> </td>
                </tr>
            )
        })
        let itemitme = this.state.ItemItem.map((doem, index) => {
            return (
                <tr key={index}>
                    <td>{doem.task}</td>
                    <td>{doem.state}</td>
                    <td> <Button>{doem.log}</Button> </td>
                </tr>
            )
        })

        return (
            <div id="page-wrapper">

                <PageTitle title="结果展示" style={{ display: 'flex', justifyContent: 'center' }} />
                <div>
                    <div>
                        <span>任务编号：3 执行集：2</span>
                    </div>
                    <div>
                        <span>用例总数：60 状态：执行中 成功数：4 失败数：1 待执行：54</span>
                    </div>
                </div>
                <Divider />

                <div style={{ display: "flex", justifyContent: "space-around" }}>
                    {/* //左边 */}
                    <div>
                        <div>
                            <span>用例执行列表</span>
                        </div>
                        <OverList tableHeads={['用例ID', '执行状态', '执行结果']}>
                            {mylist}
                        </OverList>
                    </div>

                    {/* //中 */}
                    <div>
                        <div>
                            <div>
                                <span>执行步骤</span>
                            </div>
                            <OverList tableHeads={['用例ID', '执行状态', '执行结果']}>
                                {listitem}
                            </OverList>



                            <OverList tableHeads={['任务', '执行结果', '执行日志']}>
                                {itemitme}
                            </OverList>


                        </div>
                    </div>
                    {/* 右边 */}
                    <div>
                        <Tree
                            showIcon
                            defaultExpandAll
                            defaultSelectedKeys={['0-0-0']}
                            switcherIcon={<DownOutlined />}
                            treeData={this.state.treeData}
                        />
                    </div>

                </div>


            </div>
        )
    }


}

export default OverItem